<template>
	<view class="content padding">
		<block v-for="(item, index) in couponsInfo" :key="index">
			<view class="coupon bg-img flex flex-direction " @click="jump('/pages/coupon/couponList?couponPackageId='+item.id +'&price='+item.price)">
				<view class="flex align-center " style="height: 240rpx;">
					<image :src="item.image" mode="aspectFill" class="radius  margin-left" style="width: 160rpx; height: 160rpx;"></image>
					<view class="flex flex-direction margin-left">
						<text class="text-df">{{item.name}}</text>
						<text class="text-price text-bold" style="color: #F8CE39; font-size: 70rpx;">{{item.price}} <text style="font-size: 35rpx;">元购券包</text></text>
					</view>
				</view>
				<view class="flex align-center padding-left"><text style="color: #666666;">{{item.usageTime}}</text></view>
				<view class="immediately flex flex-direction align-center justify-center" >
					<text>立</text>
					<text>即</text>
					<text>购</text>
					<text>买</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			couponsInfo:[]
		};
	},
	onShow() {
	},
	onLoad() {
		var that = this
		app.globalData.api.getCouponPackage({page:1,limit:10}).then(res=>{
			that.couponsInfo = res.rows
		});
	},
	methods: {
		jump(url) {
			uni.navigateTo({
				url,
			});
		}
	},
};
</script>

<style lang="scss" scoped>
.content {
	.coupon {
		position: relative;
		width: 690rpx;
		height: 290rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/coupon.png);
		.immediately {
			position: absolute;
			top: 0;
			right: 0;
			//transform: translateY(-50%);
			width: 125rpx;
			height: 240rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
}
</style>
